<!-- 默认问题 -->
<template>
    <div class="default-question">
        <div class="customer-service">
            <img src="@/assets/kefu.png" alt="">
            <p>福宝</p>
        </div>

        <div class="message-content">
            <span class="message-tip">你可以这样问我</span>

            
            <div class="message-list" >
                <img src="@/assets/message.png" alt="">
                <p>你好</p>
            </div>
        </div>
        <div class="change-question">
            <img src="@/assets/change.png" alt="">
            <span>换一换</span>
        </div>
        
    </div>
    
</template>
<script lang="ts">

</script>

<style lang="less" scoped>
.default-question{
    
    .customer-service{
        display: flex;
        align-items: center;
        img{
            width:30px;
            height: 30px;
            object-fit: cover;
        }
        p{
            font-size: 14px;
            padding-left: 10px;

        }
    }
    .message-content{
      
        background: white;
        border-radius: 10px;
        border-top-left-radius: 0px;
        margin-top: 20px;
        padding:10px;
        .message-tip{
            display: inline-block;
            margin: 10px 0px ;
            font-size: 14px;
        }
        .message-list{
            display: flex;
            align-items: center;
            padding:4px 7px;
            border-radius: 10px;
            background: #f3f8f9;
            margin-bottom: 10px;
            img{
                width:25px;
                height: 25px;
                object-fit: cover;
            }
           p{
            font-size: 14px;
            padding-left: 10px;
           }
        }
      
    }
    .change-question{
        margin-top: 10px;
        background: #c0d5d0;
        border-radius: 5px;
        padding:5px;
        display: inline-flex;
        img{
            width:20px;
            height:20px;
            object-fit: cover;
            margin-right: 10px;
        }
        span{
            font-size: 14px;
            line-height: 20px;
            color:white;
        }
    }
    
}
</style>
